<template>
    <div class="articleColumn">
        <Row style="margin-bottom: 10px;">
            <Col span="6">
                <div style="margin-top: 6px">
                    栏目名称：
                    <Input v-model="keyword.category_name" placeholder="请输入栏目名称" style="width: 180px">
                    <!--<Icon type="ios-search" slot="suffix" />-->
                    </Input>
                </div>
            </Col>
            <Col span="6">
                <div style="margin-top: 6px">
                    <Button type="primary" @click="search">搜索</Button>
                </div>
            </Col>
        </Row>
        <Row>
            <div>
                <Table height="400" border ref="selection" :columns="columns4" :data="categoryList" @on-selection-change="changeSelect" style="margin-bottom: 10px;"></Table>
                <div style="float: right;" v-if="total > 0">
                    <Page :total="total" show-elevator show-sizer :show-total="true" :current="1" :page-size="perPage" @on-change="changePage" size="small"></Page>
                </div>
                <Button @click="delSelectAll" v-if="disabled">批量删除</Button>
                <Button disabled v-else>批量删除</Button>
                &nbsp;
                <Button @click="handleSelectAll(false)">取消选择</Button>
            </div>
        </Row>
    </div>
</template>

<script>
    export default {
        name: "ArticleColumn",
        data () {
            //保存本实例的指针
            var _this = this;
            return {
                columns4: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center',
                    },
                    {
                        title: 'ID',
                        key: 'id',
                        sortable: true
                    },
                    {
                        title: '栏目名称',
                        key: 'category_name'
                    },
                    {
                        title: '栏目描述',
                        key: 'category_desc'
                    },
                    {
                        title: '状态',
                        key: 'category_status'
                    },
                    {
                        title: '排序',
                        key: 'category_order'
                    },
                    {
                        title: '添加时间',
                        key: 'created_at',
                        sortable: true
                    },
                    {
                        title: '操作',
                        key: 'opration',
                        render: function (h, params) {
                            return h('p', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '8px'
                                    },
                                    on: {
                                        click: function () {
                                            _this.editCategory(params.row);
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: function () {
                                            _this.singleDel(params.row, params.index);
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                categoryList: [],
                // 每页大小
                perPage: 15,
                // 记录总条数
                total: 0,
                cateIds: [],
                btnDisabled: false,
                // 搜索关键词
                keyword: {
                    category_name: '',
                    page: 1
                }
            }
        },
        methods: {
            handleSelectAll (status) {
                this.$refs.selection.selectAll(status);
            },
            // 选择
            changeSelect: function (selection) {
                this.cateIds = [];
                for (let i = 0; i<selection.length; i++) {
                    this.cateIds.push(selection[i].id);
                }
            },
            // 获取栏目列表
            getCategoryList: function () {
                var _this = this;
                this.$http.get(
                    '/api/v1/article/categoryList',
                    {
                        params: {
                            category_name: _this.keyword.category_name,
                            page: _this.keyword.page
                        }
                    }
                )
                .then(function (response) {
                    _this.categoryList = response.data.content.data;
                    _this.perPage = response.data.content.per_page;
                    _this.total = response.data.content.total;
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            // 搜索
            search: function () {
                this.getCategoryList();
            },
            // 翻页 todo:不要了，代码暂时留着
            changePage: function (currpage) {
                this.keyword.page = currpage;
                this.getCategoryList();
            },
            /**
             * 删除栏目
             * @param row 每一条记录
             * @param index 下标
             */
            singleDel: function (row, index) {
                if (!confirm('确认删除嘛？')) {
                    return false;
                }
                let _this = this;
                this.$http.get('/api/v1/article/delCategory',{
                    params: {
                        id: [row.id]
                    }
                })
                .then(function (response) {
                    if (response.data.code === 0) {
                        // 剔除表格里被删除的数据
                        _this.categoryList.splice(index, 1);
                        _this.total -= 1;
                        _this.$Message.success({
                            content: response.data.message,
                            top: 50,
                            duration: 2,
                            onClose: function () {

                            }
                        });
                    } else {
                        _this.$Message.error({
                            content: response.data.message,
                            duration: 2
                        });
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            // 批量删除
            delSelectAll: function () {
                if (this.cateIds.length  > 0) {
                    let _this = this;
                    this.$http.get(
                        '/api/v1/article/delCategoryAll',
                        {
                            params: {
                                id: _this.cateIds
                            }
                        }
                    )
                    .then(function (response) {
                        if (response.data.code === 0) {
                            // 剔除表格里被删除的数据
                            //_this.categoryList.splice(index, 1);
                            //_this.total -= 1;
                            _this.$Message.success({
                                content: response.data.message,
                                top: 50,
                                duration: 2,
                                onClose: function () {

                                }
                            });
                        } else {
                            _this.$Message.error({
                                content: response.data.message,
                                duration: 2
                            });
                        }
                    })
                    .catch(function () {

                    });
                }
            },
            // 编辑栏目
            editCategory: function (row) {
                this.$router.push({path: '/index/edit_category/'+row.id});
            }
        },
        computed: {
            disabled: function () {
                return this.cateIds.length > 0 ? true : false;
            }
        },
        mounted: function () {
            this.$nextTick(function(){
                this.getCategoryList();
            });
        }
    }
</script>

<style scoped>

</style>